<template>
    <div class="contact">
        <div v-for="data in infos" :key="data.id" class="info">
            <div v-if="data.head_img" class="headimg"><img :src="data.head_img" alt=""></div>
            <p v-if="data.name" class="name"> {{data.name}}</p>
            <p v-if="data.phone" class="phone"><i class="iconfont icon-phone1"></i><a :href="'tel:'+data.phone">{{data.phone}}</a></p>
            <p v-if="data.email" class="email"><i class="iconfont icon-email"></i><a :href="'mailto:'+data.email"></a>{{data.email}}</p>
            <p v-if="data.work_company" class="company"><i class="iconfont icon-company"></i>{{data.work_company}}</p>
            <p v-if="data.work_position" class="position"><i class="iconfont icon-position"></i>{{data.work_position}}</p>
            <div v-if="data.wemedia_qrcode" class="card">
                <img :src="data.wemedia_qrcode" alt="">
                <span class="tips">长按二维码加我好友，微信沟通</span>
            </div>
        </div>
    </div>
</template>
<script>
import { getConsultUser, recordMarketingData } from '@/api/marketing.js'
export default {
    data() {
        return {
            infos: [],
        }
    },
    components: {

    },
    mounted() {
    },
    methods: {

    },
    created() {
        document.title = '咨询'
        getConsultUser(this.$route.query.source, this.$route.query.shareUserId).then(resp => {
            this.infos = resp.infos
            if (resp.type == 'nl') {
                this.infos.forEach(e => {
                    e.name = e.chinese_name
                    e.work_company = e.company
                    e.work_position = e.position
                });
            }
        })
        // 记录咨询数据
        recordMarketingData(this.$route.query.source, null, 2, this.$route.query.shareUserId).then(resp => {
        }).catch(_ => { })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.contact {
    padding-bottom: 1rem;
    .info {
        border: 1px solid #d1e8b6;
        margin: 10px 20px;
        padding: 10px;
        border-radius: 5px;
    }
    img {
        display: block;
        width: 100%;
        height: 100%;
    }
    .headimg {
        width: 2.8rem;
        height: 2.8rem;
        margin: 0 auto;
        background: #f2f4f6;
        border-radius: 50%;
        overflow: hidden;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    }
    p {
        padding: 0 12%;
        line-height: 2rem;
        border-bottom: 1px solid #f2f4f6;
        .iconfont {
            font-size: 1rem;
            position: relative;
            top: 0.1rem;
            margin-right: 0.5rem;
            color: #9ede54;
        }
    }
    .name {
        text-align: center;
        font-weight: bold;
        font-size: 0.725rem;
        padding-bottom: 0.5rem;
    }
    .card {
        width: 66%;
        // height: 5rem;
        margin: 1rem auto;
        text-align: center;
        img {
            margin-bottom: 0.5rem;
        }
        .tips {
            font-size: 14px;
        }
    }
}
</style>
